/**
 * 产品管理的modal
 * @author: zxy
 * @update: 2017-03-10
 */

import React, {PropTypes} from 'react';
import {Modal, Form, Button, Input, Select, Switch, Spin} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

const ProductManageModal = ({
  title,
  item,
  visible,
  btnLoading,
  modalLoading,
  onOk,
  onOkAndAdd,
  onCancel,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
    resetFields,
  },
}) => {

  const formItemLayout = {
    labelCol: {span: 6},
    wrapperCol: {span: 14},
  };

  function handleOk() {
    validateFields((errors) => {
      if (errors) {
        return;
      }

      const formData = getFieldsValue();

      console.log(formData)

      onOk(formData, () => {
        resetFields();
      });

    });
  };

  const modalOpts = {
    title,
    visible,
    width: 600,
    maskClosable: false,
    onCancel,
    footer: (
      <div>
        <Button onClick={() => {
          handleOk(onOkAndAdd)
        }} size="large" loading={btnLoading}>保存并继续添加</Button>
        <Button type="primary" onClick={() => {
          handleOk(onOk)
        }} size="large" loading={btnLoading}>保存</Button>
      </div>
    )
  }

  return (
    <Modal {...modalOpts} onOk={handleOk}>
      <Spin spinning={modalLoading} tip="加载中...">
        <Form layout='horizontal'>
          <FormItem
            {...formItemLayout}
            label="产品编号"
            hasFeedback
          >
            {getFieldDecorator('product_num', {
              initialValue: item.product_num,
              rules: [{
                type: 'string',
              }],
            })(
              <Input placeholder="请输入产品编号"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="产品名称"
            hasFeedback
          >
            {getFieldDecorator('product_name', {
              initialValue: item.product_name,
              rules: [{
                type: 'string',
              }, {
                required: true, message: '产品名称未填写',
              }],
            })(
              <Input placeholder="请输入产品名称"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="产品价格"
            hasFeedback
          >
            {getFieldDecorator('product_price', {
              initialValue: item.product_price,
              rules: [{
                type: 'string'
              }, {
                required: true, message: '产品价格未填写',
              }],
            })(
              <Input placeholder="请输入产品价格" addonAfter="元"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="产品分类"
            hasFeedback
          >
            {getFieldDecorator('classify', {
              initialValue: item.classify,
              rules: [{
                required: true, message: '产品分类未选择',
              }],
            })(
              <Select placeholder="请选择">
                <Option value="male">推荐提成类</Option>
                <Option value="female">小吃</Option>
                <Option value="frute">饮料</Option>
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="销售提成"
            hasFeedback
          >
            {getFieldDecorator('commission', {
              initialValue: item.commission,
              rules: [{
                type: 'string',
              }],
            })(
              <Input placeholder="请输入销售提成"/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            hasFeedback
            label="会员卡享受折扣"
          >
            <Switch checkedChildren={'开'} unCheckedChildren = {'关'}/>
          </FormItem>
        </Form>
      </Spin>
    </Modal>
  );
};

ProductManageModal.propTypes = {
  title: PropTypes.any,
  visible: PropTypes.any,
  item: PropTypes.object,
};

export default Form.create()(ProductManageModal);